<template>
  <div class="detail">
    <NoteSidebar @update:notes="(val) => (notes = val)" />
    <div class="note-detail">
      <div class="note-empty" v-show="!curNote.id">请选择或创建笔记</div>
      <div v-show="curNote.id" style="height:100%">
        <div class="note-bar">
          <span>
            <span>创建日期：{{ curNote.createdAtFriendly }}</span>
            <span>更新日期：{{ curNote.updatedAtFriendly }}</span>
            <span>更新日期：{{ statusText }}</span>
          </span>
          <span>
            <span @click="isShowPreview = !isShowPreview"
              ><i
                class="iconfont icon-yulan"
                v-if="!isShowPreview"
                title="预览"
              ></i>
              <i class="iconfont icon-bianxie" v-else title="编写"></i
            ></span>
            <span class="note-delete" @click="onDeleteNote"
              ><i class="iconfont icon-shanchu"></i
            ></span>
          </span>
        </div>

        <div class="note-title">
          <input
            type="text"
            v-model:value="curNote.title"
            @input="onUndateNote"
            @keydown="statusText = '正在输入...'"
            placeholder="请输入标题"
          />
        </div>
        <div class="editor">
          <textarea
            v-show="!isShowPreview"
            v-model:value="curNote.content"
            @input="onUndateNote"
            @keydown="statusText = '正在输入...'"
            placeholder="输入内容，支持 Markdown 语法"
          ></textarea>
          <div
            class="preview markdown-body"
            v-html="previewContent"
            v-show="isShowPreview"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NoteSidebar from '@/components/NoteSidebar.vue'
import Auth from '@/apis/auth'
import _ from 'lodash'
import MarkdownIt from 'markdown-it'
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

let md = new MarkdownIt()

export default {
  components: {
    NoteSidebar,
  },
  data() {
    return {
      // curNote: {},
      // notes: [],
      statusText: '笔记未改动',
      isShowPreview: false,
    }
  },
  computed: {
    ...mapGetters(['notes', 'curNote']),
    previewContent() {
      return md.render(this.curNote.content || '')
    },
  },
  created() {
    this.checkLogin({ path: '/login' })
  },
  methods: {
    ...mapActions(['updateNote', 'deleteNote', 'checkLogin']),
    ...mapMutations(['setCurNote']),
    onUndateNote: _.debounce(function() {
      this.updateNote({
        noteId: this.curNote.id,
        title: this.curNote.title,
        content: this.curNote.content,
      })
        .then((res) => {
          console.log(this.statusText, '----then')
          this.statusText = '已保存'
        })
        .catch((err) => {
          console.log(this.statusText, '----catch')
          this.statusText = '保存出错'
        })
    }, 300),
    onDeleteNote() {
      this.deleteNote({ noteId: this.curNote.id }).then((res) => {
        this.$router.replace({ path: '/note' })
      })
    },
  },
  // 局部路由守卫
  beforeRouteUpdate(to, from, next) {
    this.setCurNote({ curNoteId: to.query.noteId })
    next()
  },
}
</script>

<style lang="scss" scoped>
.detail {
  display: flex;
  height: 100%;
  width: 100vw;
  .note-detail {
    width: 100%;
    background: #fff;
  }
  .note-empty {
    font-size: 50px;
    text-align: center;
    margin-top: 100px;
    color: #ccc;
    height: 100%;
  }
  .note-bar {
    padding: 4px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;

    span {
      font-size: 12px;
      color: #999;
      margin-right: 4px;
    }
    .note-delete {
      cursor: pointer;
    }
  }
  .note-title input,
  .preview {
    display: inline-block;
    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 10px 20px;
  }
  .editor {
    height: calc(100% - 66px);
    textarea {
      border: none;
      resize: none;
      outline: none;
      font-size: 14px;
      font-family: Monaco, courier, monospace;
      padding: 10px 20px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
